import React, { useState, useEffect } from "react";
import { NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { Checkbox } from "react-vant";
import { SwipeAction, Card, Button } from "antd-mobile";
import "./pingjia.css";
import axios from "axios";
import { useSelector } from "react-redux";
import { SubmitBar } from "react-vant";

export default function Pingjia() {
  const navigate = useNavigate();
  let [address, setAddress] = useState([]);
  let [list, setList] = useState([]);
  let getaddress = async () => {
    let res = await axios.get("/linmr/address");
    setAddress(res.data.data);
    console.log(res.data.data);
  };
  let getlist = async () => {
    let res = await axios.get("/linmr/list");
    setList(res.data.data);
  };
  useEffect(() => {
    getaddress();
    getlist();
  }, []);

  //支付
  let price = useSelector((store) => store.cart.list).reduce(
    (acc, cur) => acc + cur.price * cur.num,0);
  let pay = async () => {
    let {
      data: { result, code },
    } = await axios.post("/linmr/pcpay", { data: { price: price } });
    if (code == 200) {
      console.log(result);
      window.location.href = result;
    }
  };

  return (
    <div style={{ backgroundColor: "rgb(244, 248, 255)", height: "100vh" }}>
      <div className="pingjia">
        <NavBar
          onBack={() => {
            navigate(-1);
          }}
        >
          确认订单
        </NavBar>
      </div>
      <div>
        <div className="card">
          {address
            .filter((i) => i.status == true)
            .map((i) => (
              <div key={i._id} className="card">
                <Card style={{ marginBottom: "10px" }}>
                  <div className="ads">
                    <div className="right">
                      <p>{i.address}</p>
                      <p>
                        {i.name} {i.phone}
                      </p>
                    </div>
                  </div>
                </Card>
              </div>
            ))}
        </div>
        <div className="shop">
          {useSelector((store) => store.cart.list)
            .filter((i) => i.check)
            .map((i) => (
              <div key={i._id} className="aaa">
                <div className=" name">
                  <img src={i.image[0]} alt="" />
                  <span style={{ marginLeft: "3rem" }}>{i.name}</span>
                  <p>￥{Number(i.price).toFixed(2)}</p>
                </div>
                <div className="num1">x{i.num}</div>
              </div>
            ))}
        </div>
        <div  style={{display: "flex", justifyContent: "space-between", padding: "20px 20px", fontSize: "16px"}}>
          <span>商品总价</span>
          <span>
            ￥
            {useSelector((store) => store.cart.list)
              .filter((i) => i.check)
              .reduce((acc, cur) => acc + cur.price * cur.num, 0)}
          </span>
        </div>
      </div>
      <SubmitBar
        style={{ marginBottom: "60px" }}
        price={
          useSelector((store) => store.cart.list)
            .filter((i) => i.check)
            .reduce((acc, cur) => acc + cur.price * cur.num, 0) * 100
        }
        buttonText="结算"
        onSubmit={() => {
          navigate("/qerendingdan");
          pay();
        }}
        buttonColor="rgb(153, 204, 51)"
      >
        <span>
          共
          {useSelector((store) => store.cart.list)
            .filter((i) => i.check)
            .reduce((acc, cur) => acc + cur.num, 0)}
          件
        </span>
      </SubmitBar>
    </div>
  );
}
